<script setup>

import { ref, onMounted,onUnmounted } from 'vue'
import CodeMirror from 'codemirror';
import 'codemirror/lib/codemirror.js';
import 'codemirror/lib/codemirror.css';


import 'codemirror/addon/fold/xml-fold.js';
import 'codemirror/addon/edit/matchtags.js';
import 'codemirror/mode/xml/xml.js';



import 'codemirror/theme/night.css';
import '../assets/css/doc/docs.css';
import 'codemirror/addon/display/fullscreen.css';


var editorRef = ref(null);

onMounted(()=>{
  editor = CodeMirror(editorRef.value, {
        value: "<html>\n  " + document.body.innerHTML + "\n</html>",
        mode: "text/html",
        matchTags: {bothTags: true},
        extraKeys: {"Ctrl-J": "toMatchingTag"}
     });
})


</script>

<template>
    <div id=nav>
  <a href="https://codemirror.net/5"><h1>CodeMirror</h1><img id=logo src="../assets/css/doc/logo.png"></a>

  <ul>
    <li><a href="../index.html">Home</a></li>>
    <li><a href="../assets/css/doc/manual.html">Manual</a></li>
    <li><a href="https://github.com/codemirror/codemirror5">Code</a></li>
  </ul>
  <ul>
    <li><a class=active href="#">Tag Matcher</a></li>
  </ul>
</div>

<article>
<h2>Tag Matcher Demo</h2>


    <div ref="editorRef" id="editor"></div>

  
    <p>Put the cursor on or inside a pair of tags to highlight them.
    Press Ctrl-J to jump to the tag that matches the one under the
    cursor.</p>
  </article>
</template>

<style  scoped>
     .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
</style>